<script setup name="LoginAccount">
import { ref, reactive, computed } from "vue";
import { getPhoneCode,getCaptcha } from "@/api/login";
import { ElMessage } from "element-plus";
import { useLoginStore } from "@/store/login";

const emits = defineEmits(["update:type", "push"]);
const loginLoading = ref(false);
const store = useLoginStore();
const ruleFormRef = ref();
const getCodeStart = ref(false);

const captcha = reactive({
  captcha: "",
  session_id: "",
  loading:false
});
const rules = reactive({
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "change",
    },
  ],
  captcha:[
    {
      required: true,
      message: "请输入验证码",
      trigger: "change",
    },
  ],
});
const ruleForm = reactive({
  phone: "17703892977",
  code: "111111",
  captcha:'',
  isGetCode:false,
  type:"1"
});
function resetCaptcha(){
  captcha.session_id = '';
  captcha.captcha = '';
  captcha.loading = false
}
getCaptchaFn()
async function getCaptchaFn() {
  resetCaptcha()
  captcha.loading = true
  await getCaptcha().then((res) => {
    captcha.session_id = res.data.session_id;
    captcha.captcha = res.data.captcha;
    captcha.loading = false
  });
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginLoading.value = true;
      store
        .loginFn(ruleForm)
        .then(() => {
          loginLoading.value = false;
          emits("push", true);
        })
        .catch(() => {
          getCaptchaFn()
          loginLoading.value = false;
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
const time = computed(() => store.codeTime);
const getCode = () => {
  if (getCodeStart.value) return;
  if(ruleForm.isGetCode){
    ElMessage.success("发送中")
    return;
  }
  ruleForm.isGetCode = true;
  getPhoneCode({
    phone: ruleForm.phone,
    session_id: captcha.session_id,
    captcha: ruleForm.captcha,
  }).then((res) => {
    ElMessage.success("验证码发送成功");
    getCodeStart.value = true;
    store.startCodeTime();
    setTimeout(() => {
      getCodeStart.value = false;
    }, 60000);
  }).finally(() => {
    ruleForm.isGetCode = false;
  });
};
</script>
<template>
  <div class="card">
    <div class="title">手机号登录</div>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="图形验证码" prop="captcha">
        <el-input v-model="ruleForm.captcha">
          <template #append>
            <el-image @click="getCaptchaFn" class="pointer" v-loading="captcha.loading" :src="captcha.captcha"></el-image>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="ruleForm.code">
          <template #append>
            <span class="pointer" style="color: #000" @click="getCode()">
              {{ getCodeStart ? time : "获取验证码" }}
            </span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loginLoading"
          style="width: 100%; height: 40px; font-size: 18px"
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
    <!-- <el-divider />
    <div class="loginSelect">
      <el-button class="item" @click="emits('update:type', 'account')"
        >账号登录</el-button
      >
    </div> -->
  </div>
</template>
